<template>
  <view>

    <!-- 海报背景图 -->
    <view class="container_box">
      <image :src="formList.backgroundImage" mode="widthFix"></image>
          <view class="container">
            <block v-if="formList.formFields.length != 0">
              <block v-for="(item,i) in formList.formFields" :key="i">
                <!-- 喝水吃饭分量单选 -->
                <view class="selection borderItem" v-if="item.valueType == 'radio'">
                  <view class="selection_title">
                    {{item.label}}
                  </view>
                  <view class="selection_box">
                    <text :class="['selection_box_Item',recordItem.attributeType == item1?'active':'']"
                      v-for="(item1,i1) in item.value" :key="i1" @click="selectionClick(item1)">
                      {{item1}}
                    </text>
                  </view>
                </view>
                <!-- 下拉选择 -->
                <view class="borderItem" v-if="item.valueType == 'select'">
                  <van-cell :title="recordItem.selectItem[i]" @click="selectClick(item.value,item.placeholder,i)" />
                </view>
                <!-- 输入框 -->
                <view class="borderItem" v-if="item.valueType == 'input'">
                  <van-field :value="recordItem.attribute" :placeholder="item.placeholder" @input="InputClick($event,i)" />
                </view>
                <!-- 手机号 -->
                <view class="borderItem" v-if="item.valueType == 'phone'">
                  <view class="borderItem_box">
                    <text>手机号</text>
                    <button v-if="!recordItem.phone" type="default" open-type="getPhoneNumber"
                      @getphonenumber="bindPhone">一键获取</button>
                    <text v-else>{{recordItem.phone}}</text>
                  </view>
                </view>
                <!-- 描述 -->
                <view class="describe borderItem" v-if="item.valueType == 'textarea'">
                  <view class="describe_title">
                    {{item.label}}
                  </view>
                  <view class="container_input">
                    <textarea class="container_input_box" v-model="recordItem.remarks" maxlength="200"
                      placeholder-style="color:rgba(61, 61, 61, 0.5)" :placeholder="item.placeholder"
                      @input="textareaInput($event)" />
                    <text class="container_input_abso">{{textareaList}}/200</text>
                    <!-- <image class="minImage" src="/static/picture.png" mode="widthFix"></image> -->
                    <!-- <image class="minImage minImage1" src="/static/invite.png" mode="widthFix"></image> -->
                  </view>
                </view>
              </block>
            </block>
            <view class="container_examine" v-if="JSON.stringify(InformationItem) != '{}'" @click="checkexamine">
              查看优惠劵
            </view>
          </view>
    </view>

    <!-- 按钮 -->
    <view class="container_btn" v-if="formList.formFields.length != 0">
      <button type="default" @click="addPublished">立即提交</button>
    </view>


    <!-- 下拉列表 体重~体温 -->
    <view class="selectShow">
      <van-popup :show="systemShow" round position="bottom" custom-style="height: 50%" @close="systemShow = false">
        <van-picker :columns="selectType" show-toolbar @confirm="oncolumnsConfirm" @cancel="oncolumnsClose" />
      </van-popup>
    </view>

    <!-- 我参与的活动 -->
    <view class="k">
      <van-popup @touchmove.stop.prevent="stop" :show="participantShow" round position="bottom" @close="participantShow = false"
        custom-style="height: 80%">
        <!-- 退出 -->
        <view class="quit" @click="participantShow = false">
          <image src="/static/tickets/fanhui-X@3x.png" mode="aspectFill"></image>
        </view>
        <!-- 参与 -->
        <view class="tickets_pop_text">
          <image src="/static/tickets/2_@3x.png" mode="aspectFill"></image>
        </view>
        <!-- 二维码 -->
        <view class="tickets_pop_top">
          <canvas class="applyshow_erwei_img" :style="{ width: qrcodeSize + 'px', height: qrcodeSize + 'px' }"
            canvas-id="memberCode"></canvas>
          <view class="tickets_pop_top_text">
            {{InformationItem.couponName}}
          </view>
        </view>
        <!-- 详情 -->
        <view class="tickets_pop_bottom">
          <view class="tickets_pop_bottom_left">
            <!-- <text>有效期</text> -->
            <text>领取时间</text>
            <text>到期时间</text>
            <text>所在门店</text>
            <text>使用状态</text>
          </view>
          <view class="tickets_pop_bottom_right">
            <!-- <text>30天</text> -->
            <text>{{InformationItem.startTime}}</text>
            <text>{{InformationItem.endTime}}</text>
            <text>{{InformationItem.shopName}}</text>
            <block>
              <text v-if="InformationItem.status == 0">未使用</text>
              <text v-if="InformationItem.status == 1">已使用</text>
              <text v-if="InformationItem.status == 2">已过期</text>
            </block>
          </view>
        </view>
      </van-popup>
    </view>

  </view>
</template>

<script>
  const qrCode = require('@/libs/weapp-qrcode.js');
  import {
    getFormdetail,
    postFormdetail
  } from '@/api/activity_particulars.js'
  import {
    mapGetters,
    mapActions
  } from 'vuex'
  import {
    bindWxPhone,
  } from "@/api/user.js";
  export default {
    data() {
      return {
        recordItem: {
          // 分量
          attributeType: '',
          // 输入框
          attribute: '',
          // 手机号
          phone: '',
          // 下拉
          selectItem: [],
          // 文本域
          remarks: '',
        },
        // 体温
        systemShow: false,
        formId: '',
        // 文字个数
        textareaList: 0,
        formList: [],
        // 下拉
        selectType: [],
        // 判断第几个下拉
        selectValue: 0,
        participantShow: false,
        // 优惠劵信息

        InformationItem: {},
        qrcodeSize: uni.upx2px(260),
      }
    },
    onLoad(options) {
      this.formId = options.id

      // 获取详情
      this.getFormdetailItem()
    },
    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: this.formList.formTitle,
        path: '/subpkg/formrecordList/formrecordList?id=' + this.formList.id,
        imageUrl: this.formList.previewImage
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: this.formList.formTitle,
        path: '/subpkg/formrecordList/formrecordList?id=' + this.formList.id,
        imageUrl: this.formList.previewImage
      };
    },
    // #endif
    computed: {
      ...mapGetters('m_user', ['isLogin', 'userInfo']),
    },
    methods: {
      ...mapActions('m_user', ['getCode']),
      getFormdetailItem() {
        getFormdetail(this.formId).then(res => {
          // console.log(res)
          this.formList = res.data
          this.InformationItem = res.data.coupon
          if (this.formList.formFields) {
            this.formList.formFields.forEach((item, i) => {
              if (item.valueType == 'radio') {
                item.value = item.value.split(',')
              }
              if (item.valueType == 'select') {
                this.recordItem.selectItem.push(item.placeholder)
              }
            })
          }
		  uni.setNavigationBarTitle({
		    title: this.formList.formTitle
		  })
        }).catch(err => {
          this.$util.Tips({
            title: err
          })
        })
      },
      // 体重
      oncolumnsConfirm(e) {
        // console.log(e)
        this.recordItem.selectItem[this.selectValue] = e.detail.value
        this.systemShow = false
      },
      oncolumnsClose() {
        this.systemShow = false
      },
      selectClick(value, placeholder, i) {
        this.systemShow = true
        // this.selectName = fieldname
        this.selectType = value.split(',')
        this.selectValue = i
      },
      // 单选
      selectionClick(item1) {
        // console.log(item1)
        this.recordItem.attributeType = item1
      },
      // 输入框
      InputClick(e, i) {
        console.log(e)
        this.recordItem.attribute = e.detail
      },
      // 查看优惠劵
      checkexamine() {
        const params = {
          userId: this.userInfo.id,
          activityId: this.InformationItem.id,
          type: 2 //0购卡 1 会员卡使用 2 门票
        }
        this.makeMemberCode(JSON.stringify(params))
        this.participantShow = true
      },
      makeMemberCode(text) {
        new qrCode('memberCode', {
          text: text,
          width: this.qrcodeSize,
          height: this.qrcodeSize,
          colorDark: '#333333',
          colorLight: '#FFFFFF',
          correctLevel: qrCode.CorrectLevel.H
        });
      },
      textareaInput(e) {
        // console.log(e)
        this.textareaList = e.detail.cursor
        this.recordItem.remarks = e.detail.value.trim()
      },
      // 绑定手机号
      bindPhone(e) {
        let that = this;
        this.getCode().then(code => {
          bindWxPhone(
            e.detail.encryptedData,
            e.detail.iv,
            code
          ).then(res => {
            // console.log(res.data)
            that.recordItem.phone = res.data
            if (res.success) {
              that.getUserInfo();
            }
          }, error => {
            // console.log(error);
          });
        }).catch(res => {
          // console.log(res);
        });
      },
      // 提交表单
      addPublished() {
        if (this.recordItem.phone) {
          const dateType = []
          this.formList.formFields.forEach((item, i) => {
            if (item.valueType == 'input') {
              // console.log(item.fieldname)
              dateType.push({
                'id': item.id,
                'value': this.recordItem.attribute
              })
            } else if (item.valueType == 'radio') {
              dateType.push({
                'id': item.id,
                'value': this.recordItem.attributeType
              })
            } else if (item.valueType == 'select') {
              dateType.push({
                'id': item.id,
                'value': this.recordItem.selectItem[i]
              })
            } else if (item.valueType == 'textarea') {
              dateType.push({
                'id': item.id,
                'value': this.recordItem.remarks
              })
            } else if (item.valueType == 'phone') {
              dateType.push({
                'id': item.id,
                'value': this.recordItem.phone
              })
            }
          })

          const from = {
            formId: this.formId,
            phone: this.recordItem.phone,
            data: JSON.stringify(dateType)
          }

          // console.log(from)
          postFormdetail(from).then(res => {
            console.log(res)
            this.$util.Tips({
              title: '提交成功！'
            })
            this.InformationItem = res.data
          }).catch(err => {
            this.$util.Tips({
              title: err
            })
          })
        } else {
          this.$util.Tips({
            title: '请获取手机号！'
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  /deep/ .van-cell {
    padding: 24rpx 0 !important;
    align-items: center;
    width: 100% !important;
    font-size: 30rpx !important;
    overflow: hidden;
  }

  /deep/ .van-cell__value {
    color: rgba(61, 61, 61, 1) !important;
  }

  .selectShow {
    /deep/ .van-popup {
      overflow: hidden;
    }
  }

  /deep/ .van-picker {
    padding: 24rpx;
    font-size: 36rpx;

    .van-picker__cancel,
    .van-picker__confirm {
      color: rgba(61, 61, 61, 1);
      font-size: 34rpx;
    }

    .van-ellipsis {
      font-size: 32rpx;
    }
  }

  .selection {
    padding: 43rpx 0;
    border-bottom: 1px solid #f8f8f8;

    .selection_title {
      color: rgba(61, 61, 61, 1);
    }

    .selection_box {
      margin-top: 30rpx;

      .selection_box_Item:last-child {
        margin-right: 0 !important;
      }

      .selection_box_Item {
        padding: 8rpx 25rpx;
        border-radius: 211rpx;
        margin-right: 25rpx;
        color: rgba(61, 61, 61, 0.6);
        background-color: rgba(61, 61, 61, 0.08);
        font-size: 30rpx;
      }

      .active {
        background-color: rgba(253, 211, 56, 1) !important;
        color: rgba(61, 61, 61, 1) !important;
      }
    }
  }

  .container {
    width: 100%;
    padding: 0 30rpx 190rpx;
    box-sizing: border-box;
    margin-top: 30rpx;


    .borderItem {
      // padding: 28rpx 0 !important;
      border: 4rpx solid #6e3200;
      background-color: #FFFFFF;
      box-sizing: border-box;
      padding-left: 30rpx;
      margin-bottom: 40rpx;
      padding-right: 30rpx;

      .borderItem_box {
        padding: 24rpx 0 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;

        button {
          width: 150rpx;
          height: 50rpx;
          border-radius: 50rpx;
          line-height: 50rpx;
          background-color: #FDD338 !important;
          border: none;
          font-size: 22rpx;
          color: rgba(61, 61, 61, 0.6);
          margin: 0 !important;
        }
      }
    }

    .describe {
      padding: 43rpx 0;

      .describe_title {
        color: rgba(61, 61, 61, 1);
      }

      .container_input {
        position: relative;
        width: 704rpx;
        height: 380rpx;
        background-color: rgba(247, 247, 247, 1);
        border-radius: 10rpx;
        margin-top: 20rpx;
        padding: 29rpx 36rpx;
        box-sizing: border-box;
        font-size: 26rpx;


        .container_input_box {
          height: 260rpx !important;
        }

        .container_input_abso {
          position: absolute;
          bottom: 30rpx;
          right: 50rpx;
          color: rgba(61, 61, 61, 0.5);
        }

        .minImage {
          position: absolute;
          bottom: 30rpx;
          left: 50rpx;
          width: 40rpx;
          height: 36rpx;
        }

        .minImage1 {
          left: 150rpx;
        }
      }
    }
  }

  .container_box {
    position: relative;
    image {
      display: block;
      width: 100%;
    }
  }

  .container_btn {
    position: fixed;
    bottom: 0rpx;
    width: 100%;
    padding: 0 24rpx;
    box-sizing: border-box;
    background-color: #fff;

    button {
      height: 96rpx;
      line-height: 96rpx;
      background-color: rgba(253, 211, 56, 1);
      border-radius: 226rpx;
      margin: 30rpx 0;
      font-size: 36rpx;
      font-weight: 500;
    }

    .container_btn_box {
      background-color: rgba(253, 211, 56, 0.5);
    }
  }

  .container_examine {
    text-align: center;
    font-weight: 500;
    font-size: 36rpx;
    color: rgba(61, 61, 61, 0.9);
  }

  .k {
    /deep/ .van-popup {
      border: 5rpx solid #6e3200;
      background-color: #F7F8FA;
    }

    .quit {
      width: 96rpx;
      height: 96rpx;
      position: absolute;
      top: -110rpx;
      left: 0rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .tickets_pop_text {
      width: 378rpx;
      height: 78rpx;
      position: absolute;
      top: -40rpx;
      left: 50%;
      transform: translate(-50%);

      image {
        width: 100%;
        height: 100%;
      }
    }

    .tickets_pop_top {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-top: 80rpx;
      margin-bottom: 50rpx;

      image {
        width: 300rpx;
        height: 300rpx;
      }

      .tickets_pop_top_text {
        font-size: 40rpx;
        color: #6e3200;
        margin-top: 30rpx;
      }
    }

    .tickets_pop_bottom {
      display: flex;
      margin: 0 80rpx;
      padding-top: 40rpx;
      justify-content: space-between;
      border-top: 3rpx dashed #6e3200;

      .tickets_pop_bottom_left {
        width: 35%;
        display: flex;
        flex-direction: column;
        line-height: 2.5;

        text {
          font-size: 36rpx;
          color: #6e3200;
          opacity: .6;
        }
      }

      .tickets_pop_bottom_right {
        display: flex;
        flex-direction: column;
        line-height: 2.5;
        // margin-left: 150rpx;
        width: 60%;
        text-align: right;

        text {
          font-size: 36rpx;
          color: #6e3200;

        }
      }
    }
  }
</style>
